<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin/home/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/admin/home/user' }">用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20" class="main">
      <el-col :span="12" :offset="0"><span>姓名：{{data.realName}}</span></el-col>
      <el-col :span="12" :offset="0"><span>昵称：{{data.nickName}}</span></el-col>
      <el-col :span="12" :offset="0"><span>学院：{{data.dept?data.dept.deptName:''}}</span></el-col>
      <el-col :span="12" :offset="0"><span>专业：{{data.major?data.major.majorName:''}}</span></el-col>
      <el-col :span="12" :offset="0"><span>班级:{{data.classes?data.classes.className:''}}</span></el-col>
      <el-col :span="12" :offset="0"><span>学号:{{data.unique}}</span></el-col>
      <el-col :span="12" :offset="0"><span>分队:{{data.unit?data.unit.unitName:''}}</span></el-col>
      <el-col :span="12" :offset="0"><span>职务:{{data.role?data.role.roleName:''}}</span></el-col>
      <el-col :span="12" :offset="0"><span>qq:{{data.qq}}</span></el-col>
      <el-col :span="12" :offset="0"><span>手机号码:{{data.phone}}</span></el-col>
      <el-col :span="24" :offset="0">
        <el-timeline style="font-size:20px">
          <el-timeline-item :color="data.preparationTime?'#0bbd87':''" :timestamp="data.preparationTime">
            成为预备队员
          </el-timeline-item>
          <el-timeline-item :color="data.joinTime?'#0bbd87':''" :timestamp="data.joinTime">
            成为正式队员
          </el-timeline-item>
          <el-timeline-item v-if="data.leaveTime!=null" :color="data.leaveTime?'#0bbd87':''" :timestamp="data.leaveTime">
            退队
          </el-timeline-item>
          <el-timeline-item v-else :color="data.retireTime?'#0bbd87':''" :timestamp="data.retireTime">
            光荣退役
          </el-timeline-item>
        </el-timeline>
      </el-col>

    </el-row>

  </div>
</template>

<script>
import { adminGetUserByIdApi } from "@/api/admin.js";
export default {
  props: ["uid"],
  data() {
    return {
      data: {},
    };
  },
  methods: {
    getUserInfo(id = this.uid) {
      adminGetUserByIdApi(id).then((res) => {
        const result = res.data;
        if (result.status == 200) {
          this.data = result.data;
        }
      });
    },
  },
  created() {
    this.getUserInfo();
  },
};
</script>

<style  scoped>
/* 样式定义 */
.breadcrumb {
  background-color: #f0f2f5;
  padding: 10px 20px;
  border-radius: 5px;
}

.breadcrumb .el-breadcrumb__inner {
  font-size: 18px;
}

.main {
  margin-top: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
}

.main .el-col {
  background-color: #f0f2f5;
  margin-bottom: 20px;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
}

.main .el-col:last-child {
  margin-bottom: 0px;
  padding-top: 30px;
}

.timeline {
  margin-top: 30px;
}

.timeline .el-timeline-item {
  font-size: 16px;
  padding: 10px 20px;
  border-radius: 5px;
}

.timeline .el-timeline-item__tail {
  border-top: 2px dashed #ccc;
}

.timeline .el-timeline-item__content {
  margin-left: 60px;
}

.timeline .el-timeline-item__timestamp {
  font-size: 14px;
  color: #999;
}

.timeline .el-timeline-item__node {
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 12px;
  border-radius: 50%;
  background-color: #fff;
  color: #409eff;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
}
</style>